<!DOCTYPE html>
<html>

<head>
    <title>打字游戏</title>
</head>

<body>
    <p>请输入今天要学的字母：<input id="A" value="QWERTASDFGHJKL;'">；练习次数：<input id="B" value="200">；<button id="AC">开始</button></p>
    <p>当前次数：<span id="AD">0</span>；耗时:<span id="BC">0</span>秒；平均速度:<span id="SD">0</span>秒一个</p>
    <div id="DE"
        style="font-family: 'Lucida Console';font-size: 120px;border: 3px solid red;background-color: yellow;padding: 20px;height: 120px;">
        abcdefghij</div>
    <p></p>
    <div id="CD"
        style="font-family: 'Lucida Console';font-size: 120px;border: 3px solid black;background-color: blue;padding: 20px;height: 120px;">
        abcdefghij</div>

    <input id="AB">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script>
        var zq=0
        var cw=0


        var st=0
        var to=function(){
            var nt=(new Date()).getTime()
            var ct=(nt-st)/1000
            $("#BC").text(ct.toFixed(1))
        }

        var wz = -1
        var all = ""
        var d = []
        var v=0
        var a = function (e) {
            wz = -1
            var zi = $("#A").val()
            var ci = parseInt($("#B").val())
            d = []
            for (var i = 0; i < ci; i++) {

                var sui = Math.floor(Math.random() * zi.length)
                var abc = zi[sui]
                d.push(abc)
            }
            console.log(d)
            all = d.join('')
            var s = all.substr(wz + 1, 10)
            $("#DE").text(s)
            $("#CD").text("")
            zq=0
            cw=0
            $("#AB").focus()
            st=(new Date()).getTime()
            v=setInterval(to,100)
            z=0
            $("#AB").keypress(b)
        }
        $("#AC").click(a)
        var z=0
        var b = function (e) {
            e.preventDefault();
            e.stopPropagation();
            var k = e.key
            if (k === "Enter" || k === " ") {
                var s = all.substr(wz + 1, 10)
                $("#DE").text(s)
                $("#CD").text("")
                z=0
                return
            }
            
            
            if (z>=10){
            return    
            }
            wz++
            z++
            console.log(e.key)
         

            var t = $("#CD").html()
            if (k === d[wz]) {
                $("#CD").html(t + k)
                zq++
            } else {
                $("#CD").html(t + "<span style='color:red'>" + k + "</span>")
                cw++
            }

            $("#AD").text((wz+1) + "/" + d.length +"(正确：" + zq + "次，得分：" +  (zq/d.length*100).toFixed(1) + "分，错误：" + cw + "次)")
            var nt=(new Date()).getTime()
            var ct=(nt-st)/1000
            var hdm=ct/(wz+1)
            $("#SD").text(hdm.toFixed(5))
            if (wz+1===d.length){
                alert("做完了")
                clearInterval(v)
                $("#AB").unbind()
            }

        }
        
        //$("#AB").keyup(b)
    </script>
</body>

</html>